// pages/my/myProduct/myProduct.js
import profile from '../../profile.js'

const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    lang: app.globalData.language,
    index: profile.myProduct,

    // 互动作品
    items: profile.myProduct.classProList,
    masonryHeight: 0,

    classNav: profile.myProduct.eventsNav,
    navNum: 0,
  },

  // 活动tab切换事件
  changeClassNav: function (e) {
    let id = e.detail.id, list = this.data.classNav;
    for (let i=0;i<list.length;i++){
      if (list[i].id == id) {
        list[i].onthis = true
      }else{
        list[i].onthis = false
      }
    }
    this.setData({
      classNav: list,
      navNum: id
    })
    profile.myProduct.classNav = list;
    this._doRefreshMasonry(this.data.items);
    this.masonryHeightFun(300);
  },

  // 单个作品like点击事件
  likeTap: function(e) {
    let id = e.detail.id, list = this.data.items;
    for (let i=0;i<list.length;i++){
        if (id == list[i].id) {
          if (list[i].like == true) {
            list[i].like = false;
            list[i].likeNum --;
            continue;
          }
          list[i].like = true;
          list[i].likeNum ++;
        }
    }
    this.setData({
      items: list
    })
    profile.classDetail.myProduct = list;
    this._doRefreshMasonry(this.data.items);
    this.masonryHeightFun(300);
  },

  // 语言切换事件
  menuTap: function (e) {
    this.setData({
      lang: e.detail.lang
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '个人中心'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Personal Center'
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this._doRefreshMasonry(this.data.items);
  },

  // 页面到底部事件 -- 增加瀑布流内容
  // onReachBottom: function () {
  //   this._doAppendMasonry(this.data.items);
  // },

  // 刷新瀑布流
  _doRefreshMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry');
    this.masonryListComponent.start(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 增加瀑布流内容
  _doAppendMasonry(items) {
    this.masonryListComponent = this.selectComponent('#masonry')
    // 获取接口数据后使用瀑布流组件append方法，当append完成后调用then，是否可触底价在的标志位可以在这里处理
    this.masonryListComponent.append(items).then(() => {
      console.log('refresh completed')
    })
  },

  // 瀑布流容器高度获取与设置
  masonryHeightFun: function (time) {
    let height = this.data.masonryHeight;
    setTimeout(() => {
      let query = wx.createSelectorQuery();
      query.select('#masonry').boundingClientRect(rect=>{
        height = rect.height;
        this.setData({
          masonryHeight: height
        })
      }).exec();
    }, time);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.masonryHeightFun(1000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      lang: app.globalData.language
    })
    if (app.globalData.language == 'cn'){
      wx.setNavigationBarTitle({
        title: '个人中心'
      })
    }else{
      wx.setNavigationBarTitle({
        title: 'Personal Center'
      })
    }
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 4,
        lang: app.globalData.language
      })
    }
  },
})